<template>
    <svg class="exper-lin" xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 186 20" ref="experLin"></svg>
</template>

<style lang="scss" scoped>

</style>

<script>
    export default {
        name: "svg-lin-ui",
        props: {},
        methods: {
            anime(){

                for (let i = 0; i < 19; i++) {
                    anime({
                        targets: `.exper-lin .line-${i}`,
                        y2: {
                            value: [0, 20]
                        },
//                        strokeDashoffset: [anime.random(-30, 0), anime.random(10, 30)],
                        duration: anime.random(100, 500),
                        elasticity: 200,
                        easing: 'linear',
                        direction: 'alternate',
                        loop: true
                    })
                }
            }
        },
        mounted(){

            let dom = this.$refs.experLin;
            let lineW = 2;
            for (let i = 0, num = 0; i < 186; i += lineW + 8 , num++) {
                let rectObj = document.createElementNS("http://www.w3.org/2000/svg", "line");
                rectObj.setAttribute("class", `line line-${num}`);
                rectObj.setAttribute("x1", i);
                rectObj.setAttribute("x2", i);
                rectObj.setAttribute("y1", 0);
                rectObj.setAttribute("y2", 20);
                dom.appendChild(rectObj);
            }


            this.$nextTick(() => {

                this.anime();

            })
        }
    }
</script>